<template>
    <div  class="map_box" ref="sceneDiv"></div>
</template>
<script setup>
import ThreePlus from "../composables/three/index";
import * as THREE from "three";

export default {
    name: '',
    props: {
        msg: String
    },
    data() {
        return {
            threePlus: null,
            canvas: null,
            LoadingProgress: true,
            lastPick: null,
            sceneDiv: null
        }
    },
    mounted() {
        this.threePlus = new ThreePlus(".map_box");
        this.canvas = this.threePlus.renderer.domElement


        THREE.DefaultLoadingManager.onProgress = function (item, loaded, total) {
          
            if (new Number((loaded / total) * 100).toFixed(2) == 100) {
                this.LoadingProgress = false
            }

        }

        this.seetPonits()
        window.addEventListener("resize", this.seetPonits())


    },

    methods: {
        onRay(event) {

            const pickPosition = this.setPickPosition(event)
            const raycaster = new THREE.Raycaster()
            raycaster.setFromCamera(pickPosition, this.threePlus.camera)
            const intersects = raycaster.intersectObjects([this.threePlus.map], true)

            console.log(intersects, 'intersects')
            if (intersects.length > 0) {

                if (intersects[0].object.type == 'Line') return
                if (!intersects[0].object.hasOwnProperty('properties')) return

                if (this.lastPick) {
                    if (this.lastPick.object.properties !== intersects[0].object.properties) {

                        this.lastPick.object.material[0].color.set(this.threePlus.mapColor)
                        this.lastPick = null
                    }
                }
                if (intersects[0].object.properties) {
                    intersects[0].object.material[0].color.set(new THREE.Color(0xe9a564))
                    this.threePlus.setMapdepth(intersects[0].object.properties)
                }
                this.lastPick = intersects[0]
            }
            else {
                if (this.lastPick) {
                    // 复原
                    if (this.lastPick.object.properties) {
                        this.lastPick.object.material[0].color.set(this.threePlus.mapColor)
                        this.lastPick = null
                    }
                }
            }
        },

        /**
        * 获取鼠标在three.js 中归一化坐标
        * */
        setPickPosition(event) {
            const pickPosition = { x: 0, y: 0 }
            const pos = this.getCanvasRelativePosition(event)
            pickPosition.x = (pos.x / this.canvas.width) * 2 - 1
            pickPosition.y = (pos.y / this.canvas.height) * -2 + 1
            return pickPosition
        },

        getCanvasRelativePosition(event) {
            const rect = this.canvas.getBoundingClientRect()
            return {
                x: ((event.clientX - rect.left) * this.canvas.width) / rect.width,
                y: ((event.clientY - rect.top) * this.canvas.height) / rect.height,
            }
        },
        seetPonits(){
            this.threePlus.renderer.setSize(window.innerWidth, window.innerHeight);

            this.threePlus.labelRenderer.setSize(window.innerWidth, window.innerHeight);
            this.threePlus.renderer.setPixelRatio(window.devicePixelRatio)
            this.threePlus.camera.aspect = window.innerWidth / window.innerHeight;
            this.threePlus.camera.updateProjectionMatrix();
        }




    }
}
















</script>

<style>
.map_box {
    width: 100%;
    height: 100%;
    /* position: fixed;
    z-index: 100;
    left: 0;
    top: 0; */
    /* background-image: url(../../../public/data/map/scene-bg2.png); */
    background-image: url(../assets/bg.png);
    background-size: 100% 100%;
}

.label {
    font-size: 10px;
    color: #fff;
}

canvas {
    width: 100% !important;
    height: 100% !important;
}
</style>